<template>
    <div>
        <el-row>
            <el-col :span="24" style="margin-bottom: 10px;">
                <el-button type="primary" @click="add">添加角色</el-button>
            </el-col>
            <el-table :data="listRole" border style="width: 100%">
                <el-table-column prop="id" label="序号" width="80"></el-table-column>
                <el-table-column prop="name" label="角色" width="180" #default="scope">
                    <p v-show='onid !== scope.row.id'>
                        {{ scope.row.name }}
                    </p>
                    <p v-show='onid === scope.row.id'>
                        <el-input v-model="formLabelAlign.name" v-show='onid === scope.row.id' placeholder="2-10个字符" />
                    </p>
                </el-table-column>
                <el-table-column prop="status" label="启用" width="180" #default="scope">
                    <span v-show="onid !== scope.row.id">{{ scope.row.state === 1 ? '启用' : '未启用' }}</span>
                    <el-switch v-show="onid == scope.row.id" v-model="formLabelAlign.state" inactive-value="0"
                        active-value="1" @change="changes(scope.row)"></el-switch>
                </el-table-column>
                <el-table-column prop="description" label="描述" #default="scope">
                    <p v-show='onid !== scope.row.id'>
                        {{ scope.row.description }}
                    </p>
                    <el-input v-model="formLabelAlign.description" placeholder="1-100个字符"
                        v-show="onid == scope.row.id" />
                </el-table-column>
                <el-table-column label="操作" #default="scope">
                    <p v-show='onid !== scope.row.id'>
                        <el-text class="mx-12" type="primary" @click="fpqx(scope.$index, scope.row)">分配权限</el-text>
                        <el-text class="mx-12" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-text>
                        <el-text class="mx-12" type="primary"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-text>
                    </p>
                    <p v-show='onid == scope.row.id'>
                        <el-button type="primary" @click="updok(scope.$index, scope.row)">确定</el-button>
                        <el-button @click="updno(scope.$index, scope.row)">取消</el-button>
                    </p>

                </el-table-column>
            </el-table>
            <el-pagination layout="prev, pager, next" :total="totalAll" :page-size="pageSize"
                v-model:current-page="currentPage" @current-change="handleCurrentChange" />
        </el-row>

        <el-dialog v-model="dialogVisible" :title="tit" width="500" :before-close="handleClose">
            <el-form :label-position="labelPosition" label-width="auto" :model="formLabelAlign" style="max-width: 600px"
                v-show="tit !== '分配权限'">
                <el-form-item label="角色名称">
                    <el-input v-model="formLabelAlign.name" placeholder="2-10个字符" />
                </el-form-item>
                <el-form-item label="启用">
                    <el-switch v-model="formLabelAlign.state" inactive-value="0" active-value="1"></el-switch>
                </el-form-item>
                <el-form-item label="角色介绍">
                    <el-input v-model="formLabelAlign.description" :rows="2" type="textarea" placeholder="1-100个字符" />
                </el-form-item>

            </el-form>
            <el-tree style="max-width: 600px" :data="Permission" :props="defaultProps" @node-click="handleNodeClick"
                @check-change="handleCheckChange" show-checkbox v-show="tit == '分配权限'" ref="treeRef" node-key="id" />
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="ok">确定</el-button>
                    <el-button @click="no">
                        取消
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getrole, pageRole, addRole, getRolea, delRolea, updrole, getPermission, updPermission, assignPrem } from '../axios/user'
import { ElMessageBox, ElTree } from 'element-plus'
import type { FormProps } from 'element-plus'
import createTree from '../components/menu'
import type Node from 'element-plus/es/components/tree/src/model/node'

let listRole = ref([])
let Permission = ref<any>([])
onMounted(() => {
    pageRole(currentPage.value, pageSize.value).then((res: any) => {
        totalAll.value = res.data.data.total
        listRole.value = res.data.data.rows
    })

    getPermission().then((res: any) => {
        Permission.value = createTree(res.data.data)
    })

})
// 树形选项ref
const treeRef = ref<InstanceType<typeof ElTree>>()

const labelPosition = ref<FormProps['labelPosition']>('right')
const formLabelAlign = ref({
    id: "",
    name: "",
    description: "",
    state: 0
})


// 弹窗
const dialogVisible = ref(false)
const handleClose = (done: () => void) => {
    dialogVisible.value = false
}

let onid = ref(null)
let tit = ref<any>(null)
let uid = ref(null)
let qxobj = ref<any>(null)
let qxid = ref(null)
let qxarr = ref<any>([])
const add = () => {
    dialogVisible.value = true
    tit.value = '新增角色'
    formLabelAlign.value = {
        id: "",
        name: "",
        description: "",
        state: 0
    }
}

const fpqx = async (index: number, row: any) => {
    // console.log(index, row)
    dialogVisible.value = true
    tit.value = '分配权限'
    qxid.value = row.id
    await getRolea(row.id).then((res: any) => {
        // console.log(res.data.data.permIds);
        qxarr.value = res.data.data.permIds
        treeRef.value!.setCheckedKeys(res.data.data.permIds)

        console.log(res.data.data.permIds);
    })
}

const handleCheckChange = async (
    data: Tree,
    checked: boolean,
    indeterminate: boolean
) => {

    // console.log(data, checked);
    if (checked) {
        let q = qxarr.value.findIndex(item => item == data.id)
        if (q == -1) {
            qxarr.value.push(data.id)
            // console.log(qxarr.value);
        }
        // console.log(qxarr.value);

    } else {
        qxarr.value.splice(q, 1)
        // console.log(qxarr.value);
    }
    qxobj.value = {
        id: qxid.value,
        permIds: qxarr.value
    }

    // let obj = {
    //     name: data.name,
    //     code: data.code,
    //     description: data.description,
    //     id: data.id,
    //     type: data.type,
    //     pid: data.pid,
    //     enVisible: data.enVisile,
    //     id: data.id
    // }
}

const setCheckedKeys = () => {
    treeRef.value!.setCheckedKeys([3], false)
}

const handleEdit = async (index: number, row: any) => {
    onid.value = row.id
    await getRolea(row.id).then((res: any) => {
        formLabelAlign.value = res.data.data
    })
}

const handleDelete = async (index: number, row: any) => {
    console.log(index, row)
    await delRolea(row.id).then((res: any) => {
        if (res.data.success) {
            ElMessageBox.alert('删除成功', '提示', {
                confirmButtonText: '确定',
            })
            dialogVisible.value = false
            pageRole(currentPage.value, pageSize.value).then((res: any) => {
                totalAll.value = res.data.data.total
                listRole.value = res.data.data.rows
            })
        }

    })
}



// 确定
const ok = async () => {
    if (tit.value == '新增角色') {
        if (formLabelAlign.value.name !== '' || formLabelAlign.value.description !== '') {

            var data = {
                name: formLabelAlign.value.name,
                description: formLabelAlign.value.description,
                state: formLabelAlign.value.state
            }

            await addRole(data).then((res: any) => {
                console.log(res.data);

                if (res.data.success) {
                    ElMessageBox.alert('添加成功', '提示', {
                        confirmButtonText: '确定',
                    })
                    dialogVisible.value = false
                    pageRole(currentPage.value, pageSize.value).then((res: any) => {
                        // console.log(res.data);
                        totalAll.value = res.data.data.total
                        listRole.value = res.data.data.rows
                    })
                }

            })
        }

    } else if (tit.value == '分配权限') {
        // console.log(treeRef.value);
        // console.log(qxobj.value);
        await assignPrem(qxobj.value).then((res: any) => {
            pageRole(currentPage.value, pageSize.value).then((res: any) => {
                totalAll.value = res.data.data.total
                listRole.value = res.data.data.rows
            })
            dialogVisible.value = false
        })
    }
}
// 取消
const no = () => {
    dialogVisible.value = false
}

const changes = (data) => {
    // formLabelAlign.value.state ? formLabelAlign.value.state = 1 : formLabelAlign.value.state = 0
    // console.log(data);
}

// 编辑
const updok = async () => {
    console.log(formLabelAlign.value);
    await updrole(formLabelAlign.value).then((res: any) => {
        if (res.data.success) {
            ElMessageBox.alert('修改成功', '提示', {
                confirmButtonText: '确定',
            })
            onid.value = null
            pageRole(currentPage.value, pageSize.value).then((res: any) => {
                totalAll.value = res.data.data.total
                listRole.value = res.data.data.rows
            })

        }
    })
}

const updno = () => {
    onid.value = null
}




const small = ref(false)
const background = ref(false)
const disabled = ref(false)
// 分页
const currentPage = ref(1)
const pageSize = ref(5)
const totalAll = ref()
const tableData = ref([])


const handleCurrentChange = (val: number) => {
    pageRole(val, pageSize.value).then((res: any) => {
        listRole.value = res.data.data.rows
    })
}



// 树形控件
interface Tree {
    label: string
    children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
    console.log(data)
}


const defaultProps = {
    // children: 'children',
    label: 'name',
}


</script>
<style scoped>
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

.mx-12 {
    margin-right: 10px;
}
</style>
